<template>

  <div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>GPU服务设置</span>
        <el-button style="float: right; padding: 3px 0"
         @click="checkGPU" :loading="loading"
         type="text">检测GPU资源</el-button>
       </div>
        <div>
          <el-table
            :data="tableData"
            border
            style="width: 100%">

            <el-table-column
              prop="id"
              label="ID"
              width="150"
              >
            </el-table-column>

            <el-table-column
              prop="name"
              label="GPU">
            </el-table-column>

            <el-table-column
              prop="version"
              label="驱动版本">
            </el-table-column>

            <el-table-column
              prop="status"
              label="使用状态"
              >

              <template slot-scope="scope">
                <el-progress
                :text-inside="true" :stroke-width="20"
                :percentage="scope.row.percentage" :color="customColors"
                 ></el-progress>
              </template>

            </el-table-column>

            <el-table-column
              prop="limit"
              label="限制路数"
              width="180">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.limit"
                  active-value="1"
                  inactive-value="0"

                  >
                </el-switch>
              </template>

            </el-table-column>

            <el-table-column
              prop="quantity"
              label="路数"
              width="150"
              >
                <template slot-scope="scope">
                  <el-input placeholder="请输入内容" v-model="scope.row.quantity" type="number" min="0" max="2" >
                    <template slot="append">路</template>
                  </el-input>
                </template>
            </el-table-column>

          </el-table>
        </div>
        <div style="border-top: 1px solid #e6ebf5;padding-top: 16px;">
          <el-row :gutter="20">
            <el-col :span="16">
              <div class="grid-content bg-purple">
                <el-button type="danger" round plain icon="el-icon-warning"  @click="restartGPU" :loading="loading">重启服务</el-button>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple" style="text-align: right;">
                <el-button type="primary" round plain icon="el-icon-refresh-right"  @click="submitForm" :loading="loading">更新</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
    </el-card>

  </div>

</template>
<script>

  import {
    getGPUs,
    checkGPU,
    saveGPU
  } from '@/api/cloud/gpu'

  import {
    restartGPU
  } from '@/api/cloud/server'

  import {
    isOk
  } from '@/utils/request'


  export default {
    name: 'SignalingServerConfig',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{
    },
    watch:{
      properties: {
        handler: function(value) {
        },
        immediate: true,
        deep: false
      }
    },
    data(){
      return {
        loading:false,
        signalingForm:{
          signalingDomain:"",
          signalingDomainInner:"",
          signalingPort:"",
          signalingPortInner:"",
          signalingEnableSSL:"0",
          signalingSSLKeyAbsolutePath:"",
          signalingSSLCertAbsolutePath:"",
        },

        customColor: '#409eff',
        customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],

        rules: {
          signalingDomain: [{
            required: true,
            message: '请输入信令外网地址',
            trigger: 'blur'
          }],
          signalingDomainInner: [{
            required: true,
            message: '请输入信令内网网地址',
            trigger: 'blur'
          }],
          hostDomain: [{
            required: true,
            message: '请输入后端IP/域名',
            trigger: 'blur'
          }]
        },
        tableData: []
      }
    },
    created() {
      this.getGPUs();
    },
    methods:{
      getGPUs(){
        this.loading=true
        getGPUs().then(response => {
          this.loading=false
          if(isOk(response)){
            const _data=response.result;
            this.tableData=_data;
            console.log(_data)
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      checkGPU(){
        this.loading=true
        checkGPU().then(response => {
          this.loading=false
          if(isOk(response)){
            this.$message({
              type: 'success',
              message:response.message
            })
            this.getGPUs();
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      restartGPU(){
        this.$confirm('重启会释放正在连接用户，确认重启吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading=true
          restartGPU().then(response => {
            this.loading=false
            if(isOk(response)){
              this.$message({
                type: 'success',
                message:response.message
              })
            }
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {
            this.loading = false
          })
        })
      },
      submitForm: function() {
            this.loading = true
            saveGPU({
              data:JSON.stringify(this.tableData)
            }).then(rsp => {
              this.$message({
                type: 'success',
                message:rsp.message
              })
            }).catch(err => {
              console.log(err);
            })
            .finally(() => {
              this.loading = false
            })

      },
    }
  }
</script>

<style>
</style>
